<!DOCTYPE>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>创建消息</title>
    <link rel="stylesheet" href="${rc.contextPath}/static/lib/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="${rc.contextPath}/static/plugin/layer/skin/layer.css">
    <!--<link rel="stylesheet" href="list.css">-->
    <style type="text/css">
        body{padding-top:10px;}
        .fl{float:left;}
        .fr{float:right;}
        .por{position: relative;}
        .clearfix:after{content:'';display:block;height:0;visibility:hidden;clear:both;}
        .clearfix{zoom:1;}
        #pagination{margin:0 20px;}
        .layui-form{margin:0 20px;}
        .update input{position: absolute;height:36px;width:100px;z-index:3;opacity: .01;cursor: pointer;}
        .update span{color:#5FB878;position: absolute;left:0;top:0;width: 110px;height:36px;text-align:center;line-height:36px;border:1px solid #ddd;border-bottom-right-radius: 2px;border-top-right-radius:2px;font-size:14px;}
        .update i{color:#000;font-style: normal;font-size:16px;}
        .layui-form-item .layui-input-inline{width:auto;}
        /*通知对象样式*/
        .box{height:28px;border:1px solid red;font-size:0;margin:5px;}
        .content{margin:5px;}
        .content select{width:100px;}
        .content select option.disabledBg{background:#ddd;}
        /* 选中的元素span被放到展示框里的样式 */
        .box span{font-size:12px;display:inline-block;border:1px solid #ddd;margin:3px;padding:2px;cursor:pointer;border-radius:2px;}
        .box span:hover{box-shadow: 0 0 10px #666;}
        .box span b{display: inline-block;height:12px;width:12px;text-align:center;line-height:12px;padding:0 2px;vertical-align:top;}
        .box span b img{width: 12px;height:12px;vertical-align:middle;}
        .checkbox{position: relative;width:100px;height:32px;padding-left:32px;}
        .checkbox input{position: absolute;left:0;top:0;width:50px;height:32px;opacity:.01;z-index:2;cursor:pointer;}
        .checkbox input:hover+i{border:1px solid #5FB878;}
        .checkbox i.checkedColor{color:#fff;border:1px solid #5FB878;background: #5FB878;}
        /*table td ,table th{border:1px solid #bbb;padding:0 5px;font-size:14px;}*/
        .checkbox i.downTriangle{position: absolute;width:22px;height:22px;line-height:22px;text-align:center; text-indent: -8px;top:0;bottom:0;left:0;margin:auto;z-index:1;font-size:16px;color:#ddd;}
         #layui-layer1{top:50px !important;}
        /*上传按钮样式*/
        .layui-upload-button{min-width:110px;background-color:rgba(255,255,255,0);color:#5FB878;margin-left:14px;margin-right:5px;}
        .layui-upload-button:hover {background-color:rgba(255,255,255,0);color:#5FB878;}
        .layui-upload-button input:hover {background-color:rgba(255,255,255,0);color:#fff;cursor:pointer;}
        .layui-upload-icon{margin:0;font-size:14px;}
        .layui-upload-icon i{color:#5FB878;}
        /*通知对象*/
        .receive {padding:2px 5px;margin:0 10px 0 0;line-height: 48px;border:1px solid #ddd;width:157px;float:left;}
        .receive li{line-height:32px;box-sizing: border-box;width:150px;}
        .receive li input{width:150px;}
        /*.receive li.allChose input{width:32px;}*/
        /*用户显示面板*/
        .userPanel{position: fixed;border:1px solid #ddd;left:0;top:0;z-index: 3;width:100%;min-height:100%;background: rgba(0,0,0,.4);}
        .userPanel h3{heigth:32px;line-height: 32px;font-size: 16px;text-align: center;background: #eee;}
        .userPanel .userPanelContent{position: absolute; border:1px solid #ddd;left:50%;top:40px;width:50%;height:50%;transform: translateX(-50%);background: #fff;padding-bottom:50px;}
        .userPanel .userPanelContent .checkboxIcon{border:1px solid #ddd;width:32px;height:32px;line-height:32px;display: inline-block;}
        /*关闭按钮*/
        .userPanel .closeIcon{position: absolute;right:0;top:0;width:32px;height:32px;text-align: center;line-height: 32px;cursor:pointer;background: #eee;z-index:9999;}
        .userPanel button{position: relative;top:170px;right:-50px;text-align:center;}
        /*消息类型下拉框*/
        .msgType{padding: 2px 5px;
            margin: 0 10px 0 0;
            height:38px;
            line-height: 48px;
            border: 1px solid #ddd;
            width: 170px;
            float: left;
        }
        .x-red{
            color: red;
        }
    </style>
</head>
<body>
<div id="createApp">
<div>
<form >
    <input type="hidden" name="id" id="id" v-model="parameter.id">
    <input type="hidden" name="status" id="status" v-model="parameter.status">
    <input type="hidden" name="createTime" id="createTime" v-model="parameter.createTime">
    <input type="hidden" name="updateTime" id="updateTime" v-model="parameter.updateTime">
    <input type="hidden" name="readTime" id="readTime" v-model="parameter.readTime">
    <input type="hidden" name="imageShow" id="imageShow" v-model="parameter.imageShow">
    <input type="hidden" name="createUser" id="createUser" v-model="parameter.createUser">
    <input type="hidden" name="updateUser" id="updateUser" v-model="parameter.updateUser">

    <fieldset class="layui-elem-field layui-field-title" >
        <legend>消息</legend>
    </fieldset>
  <div class="layui-form-item">
    <label class="layui-form-label">发布人</label>
    <div class="layui-input-inline" >
      <input type="text" name="publish"  :value="parameter.publish" v-model="parameter.publish" autocomplete="off" class="layui-input" disabled="">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">消息标题</label>
    <div class="layui-input-inline">
      <input type="text" name="title" :value="parameter.title" v-model="parameter.title" lay-verify="required" disabled=""placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item ">
    <label class="layui-form-label">消息内容</label>
    <div class="layui-input-block">
      <textarea  class="layui-textarea" placeholder="请输入内容"  disabled=""name="content"   style="width: 600px;height: 200px; display:inline-block;float: left;margin-right:10px;" v-model="parameter.content">
      </textarea>

    </div>
  </div>
    <div class="layui-form-item">
        <label class="layui-form-label">消息附件</label>
        <div class="site-demo-upload por">
            <input type="text" name="attachMent" :value="parameter.attachMent" v-model="parameter.attachMent" lay-verify="required" disabled=""placeholder="文件名" autocomplete="off" class="layui-input">
            <button class="layui-btn"  @click="download">下载</button>
            <button class="layui-btn"  @click="preview">预览</button>
        </div>
    </div>


</form>
</div>
</div>
<script src="${rc.contextPath}/static/lib/jquery.min.js"></script>
<script src="${rc.contextPath}/static/lib/layui/layui.js" charset="utf-8"></script>
<script src="${rc.contextPath}/static/lib/vue.min.js"></script>
<script src="${rc.contextPath}/static/lib/pdfobject.min.js"></script>
<script type="text/javascript">
    var myid="!${messages.id}"
    if(myid==""){
        var kid=""
    }else {
        kid="$!{messages.id}"
    }
    var VM = new Vue({
        el:"#createApp",
        created:function(){
            this.getMessagesLists();
        },
        data:{
            messagesLists:[],
            parameter:{
                id:kid,
                publish:'$!{messages.publish}',
                title:'$!{messages.title}',
                content:'$!{messages.content}',
                attachMent:'$!{messages.attachMent}',
                receiveObject:'$!{messages.receiveObject}',
                status:'$!{messages.status}',
                createTime:'$!{messages.createTime}',
                updateTime:'$!{messages.updateTime}',
                createUser:'$!{messages.createUser}',
                updateUser:'$!{messages.updateUser}',
                readTime:'$!{messages.readTime}',
                type:'$!{messages.type}',
                order:'$!{messages.order}',
                imageShow:'$!{messages.imageShow}'
            },
            receiveObject1:[],
            imgSrc:"",
            dictionariesList:[]

        },
        methods: {
            getMessagesLists: function () {
                var _this = this;
                PDFObject.embed('http://182.254.136.235:81/uploads/'+this.parameter.imageShow, "#pdfUrl");
                if(this.parameter.imageShow){

                  //  this.imgSrc = 'http://182.254.136.235.:81/uploads/'+this.parameter.imageShow;
                 //   $('#enclosure').attr('href','http://182.254.136.235.:81/uploads/'+this.parameter.imageShow);
                }else{
                   // this.imgSrc = "${rc.contextPath}/static/images/timg.jpg";
                }
//                console.log(this.parameter.receiveObject);
                _this.receiveObject1 = this.parameter.receiveObject.split(",");
                $.ajax({
                    type: "post",
                    url: '${rc.contextPath}/messages/getInitInfo.do',
                    dataType: "json",
                    success: function (res) {
                        console.log(res);
                        _this.messagesLists = res.result.list;
                        _this.parameter.publish = res.result.username;
                        _this.dictionariesList = res.result.dictionariesList;

                        //选中返回的 已选人物
                        _this.messagesLists.forEach(function(item,index){
                            item.departmentList.forEach(function(subItem,index1){
                                subItem.dicUsersList.forEach(function(user,index2){
                                    _this.receiveObject1.forEach(function(myUser,myIndex){
                                        if(myUser == user.userName){
//                                            if (typeof user.checked == "undefined") {
                                                Vue.set(user, "checked", true);
//                                            }
                                        }
                                    })

                                });
                            });
                        });
                    }
                })
            },
            selectUsers: function (item) {
                if (typeof item.checked == "undefined") {
                    Vue.set(item, "checked", true);
                } else {
                    item.checked = !item.checked;
                }
                this.parameter.receiveObject = this.receiveObject1.join(",");
//                console.log(this.receiveObject1);
            },
            download:function(){
                var path = this.parameter.imageShow;
                var name = this.parameter.attachMent;
                $.ajax({
                    type: "POST",
                    url: "../../multipart-file/download.do",
                    data: {"path":path,"name":name},
                    dataType: "json",
                    success: function(data){
                        alert("11111");
                     }
                });
            },
            preview:function () {
                var location=this.parameter.imageShow;
                var point = location.lastIndexOf(".");

                var type = location.substr(point);
                if(type==".jpg"||type==".gif"||type==".JPG"||type==".GIF"||type==".png"){
                    $('#LAY_demo_upload').attr('href','http://182.254.136.235:81/uploads/'+this.parameter.imageShow);
                }
                if(type==".pdf"){
                    window.open('http://182.254.136.235:81/uploads/'+this.parameter.imageShow);
                    PDFObject.embed('http://182.254.136.235:81/uploads/'+this.parameter.imageShow, "#pdfUrl");
                }
            },

            sub: function () {
                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                parent.layer.close(index);
                parent.window.location.reload();
                window.location.href = "javascript:location.replace(location.href)";
            },
            selectSelf: function (item) {
                if (typeof item.checked == "undefined") {
                    Vue.set(item, "checked", true);
                } else {
                    item.checked = !item.checked;
                }
            },
            downShow:function(item){
                if(typeof item.subItemShowFlag == "undefined") {
                    Vue.set(item, "subItemShowFlag", true);
                }else{
                    item.subItemShowFlag = !item.subItemShowFlag;
                }
            },
            userShow:function(subItem){
                var _this = this;

                if(typeof subItem.userShowFlag == "undefined") {
                    Vue.set(subItem, "userShowFlag", true);
                }else{
                    subItem.userShowFlag = !subItem.userShowFlag;
                }
            },
            choseUser:function(user){
                if(typeof user.checked == "undefined") {
                    Vue.set(user, "checked", true);
                }else{
                    user.checked = !user.checked;
                }
            },
            allChose:function (subItem) {
                if(typeof subItem.checked == "undefined"){
                    Vue.set(subItem,"checked",true);
                    subItem.dicUsersList.forEach(function(user,index){
                        if(typeof user.checked == "undefined"){
                            Vue.set(user,"checked",true);
                        }
                    });
                }else{
                    subItem.checked = !subItem.checked;
                    Vue.delete(subItem,"checked",true);
                    subItem.dicUsersList.forEach(function(user,index){
                        user.checked = !user.checked;
                        Vue.delete(user,"checked",true);
                    });
                }
            }
        }
    });//vue 实例结束


    layui.use(['layer',"form",'laydate','upload'], function(){
        var form = layui.form(),
                layer = layui.layer,
                laydate = layui.laydate;
        var pathStr = '';
        var imgStr='';
        layui.upload({
            url: '${rc.contextPath}/multipart-file/upload.do'
            ,elem: '' //指定原始元素，默认直接查找class="layui-upload-file"
            ,success: function(res){
//                var paths = res.result.path;
                var paths = res.result.url;
                console.log("paths="+res.result.url);
                pathStr += paths+",";
                console.log(res);

                var aa=res.result.url.split('.');
                if(/\.(gif|jpg|jpeg|png|bmp|tiff|GIF|JPG|JPEG|PNG|BMP|TIFF)$/.test(res.result.url)){
//                    imgStr=res.result.path;
                    imgStr=res.result.url;

                }
                VM.parameter.imageShow=imgStr;
                VM.parameter.attachMent = pathStr;
                console.log("att="+VM.parameter.attachMent);
                if(imgStr){
                    $("#LAY_demo_upload").attr('src','http://182.254.136.235.:81/uploads/'+imgStr);
                }else{
                    $("#LAY_demo_upload").attr('src',"${rc.contextPath}/static/images/timg.jpg");
                }
                layer.msg("上传成功！", {icon: 0});
            }
        });
        form.on('checkbox(allChoose)', function(data){
            var child = $(data.elem).parents('table').find('tbody input.checkbox');
            child.each(function(index, item){
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });
    });
</script>
</body>
</html>